<template>
	<view class="mainpadding mainbgc">
		<view class="neirong">
			<view class="mainpadding ffffff margin_top">
				<view class="guanwang">公司官网</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的官方地址" class="margin_top" v-model="shop_url"></textarea>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="flexleft">
					<view class="guanwang">公司主营</view>
					<view class="word_red"> *</view>
				</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的主营业务" class="margin_top" v-model="zyyw"></textarea>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="flexleft">
					<view class="guanwang">公司简介</view>
					<view class="word_red"> *</view>
				</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司简介" class="margin_top" v-model="gsjj"></textarea>
				</view>
			</view>
			<!-- 宣传语-->
			<view class="center_a">
				<view class="flexbetween">
					<view class="guanwang">企业形象宣传语</view>
					<view class="word_grey">{{qyxc.length}}/120字</view>
				</view>
				<textarea type="text" placeholder="请输入企业形象宣传语" maxlength="120" class="margin_top"
					v-model="qyxc"></textarea>
			</view>
			<!-- 企业详情-->
			<view class="center_a">
				<view class="flexbetween">
					<view class="guanwang">企业详情</view>
					<view class="word_grey">{{qyxq.length}}/3000字</view>
				</view>
				<textarea type="text" placeholder="请输入企业详情" maxlength="3000" class="margin_top"
					v-model="qyxq"></textarea>
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="flexleft">
					<view class="guanwang">经营地址</view>
					<view class="word_red"> *</view>
				</view>
				
				<view class="flexright">
					<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="请选择经营地址"
						popup-title="请选择经营地址" v-model="address.county" class="margin_right">
						<text class="inputs1" v-if="!area.length" style="color: #999999;">请选择经营地址</text>
						<text class="inputs1" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="mainpadding ffffff margin_top">
				<view class="guanwang">详细地址</view>
				<view class="http">
					<textarea type="text" placeholder="请输入公司的详细地址" class="margin_top"
						v-model="addressdetail"></textarea>
				</view>
			</view>
			<!-- 专线 -->
			<view class="center_a ">
				<view class="center_gray">
					<view class="flexbetween ffffff zhuan">
						<view class="flexleft">
							<view class="guanwang">联系人</view>
							<view class="word_red"> *</view>
						</view>
						<view class="flexleft ">
							<view class="tian word_grey" @click="tianjia">添加</view>
							<view class="right_icon"></view>
						</view>
					</view>
					<view class="hh" v-for="(item,index) in lxr_data" :key="index">
						<view class="center_nav flexbetween">
							<view>
								<input type="text" class="grey" placeholder="联系人姓名" v-model="item.name">
								<input type="text" class="grey_num" placeholder="联系人电话" v-model="item.mobile">
							</view>
							<view class="del" @click.stop="dellxr(index)"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="guanwang">座机</view>
				<input class="inputs textright" type="number" placeholder="请输入座机号码" v-model="zj">
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="guanwang">邮箱</view>
				<input class="inputs textright" type="text" placeholder="请输入邮箱" v-model="email">
			</view>
			<!-- 上传图片 -->
			<view class="mainpadding_top ffffff radius">
				<view class="strongtext">上传图片（{{mm_image.length}}/9）</view>
				<view class="flexleft flex_wrap">
					<!-- 上传图片 -->
					<view class="item_image_box flexcenter" v-if="mm_image.length" v-for="(item,index) in mm_image"
						:key="item">
						<view class="item_image radius">
							<image :src="item" mode=""></image>
							<view class="deletimg" @click="delimg(index)"></view>
						</view>
					</view>
					<view class="item_image_box flexcenter" @click="uploadImg(mm_image,9)" v-if="mm_image.length<10">
						<view class="flexcolumn upimagebox radius">
							<view class="upimage">
								<view class="camera radius"></view>
							</view>
							<view style="margin-top: 20rpx;">门面图</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 上传视频 -->
			<view class=" center_a">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="text_weight">上传视频 </view>
						<view class="word_red"> *MP4/30s/6M内</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="item_image_box flexcenter" v-for="(item,index) in video_url" :key="index"
					v-if="video_url.length">
					<view class="item_image radius">
						<video :src="item" class="videourl radius"></video>
						<view class="deletimg" @click="video_url=[]"></view>
					</view>
				</view>
				<view class="item_image_box flexcenter" @click="upvideo" v-if="!video_url.length">
					<view class="flexcolumn upimagebox radius">
						<view class="upimage">
							<view class="video radius"></view>
						</view>
						<view style="margin-top: 20rpx;">视频</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb" @click="submit">
			<view class="bigbtn">提交</view>
			<!-- 提交审核之后显示的按钮 -->
			<!-- <view class="bigbtn" @click="tzshz">查看详情</view> -->
		</view>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "../../static/city/city.js"
	export default {
		data() {
			return {
				//企业分类开始
				qyflshow: false,
				qyflcloms: [],
				qyflid: [],
				qyflname: "",
				//企业分类结束
				area: [], //收获地址
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: citys.data,
				addressdetail: "",
				fr_name: "",
				shop_url: "",
				fr_idcard: "",
				gsjj: "",
				zyyw: "",
				shop_name: "",
				yyzz_image: "", //营业执照
				fr_zimage: "", //法人头像面
				fr_fimage: "", //法人国徽面
				lxr_data: [{
					name: "",
					mobile: "",
				}],
				zj: "",
				email: "",
				qyxc: "",
				qyxq: "",
				mm_image: [],
				video_url: [],
			}
		},
		onLoad() {
			this.getinfo()

		},
		methods: {
			upvideo() {
				let uploadFile = ''
				let _this = this;
				// 1.选择要上传的视频
				uni.chooseVideo({
					maxDuration: 30, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
					success: function(res) {

						_this.uploadImageService(res.tempFilePath, _this.video_url)
					}
				});

			},
			uploadImg(upImgs, value) {
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (let i = 0; i < res.length; i++) {

									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (let i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(image_item);
				}).catch(err => {});
			},
			// 删除图片
			delimg(index) {
				this.mm_image.splice(index, 1)
			},
			tianjia() {
				this.lxr_data.push({
					name: '',
					mobile: '',
				})
			},
			dellxr(index) {
				if (this.lxr_data.length == 1) {
					httpRequest.toast("请至少填写一个联系人")
					return false
				}
				this.lxr_data.splice(index, 1)
			},
			getinfo() {
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						if (res.data.shop_apply) {
							this.shop_name = res.data.shop_apply.shop_name
							this.address.province = res.data.shop_apply.province_id
							this.address.city = res.data.shop_apply.city_id
							this.address.county = res.data.shop_apply.area_id
							this.addressdetail = res.data.shop_apply.address
							this.fr_name = res.data.shop_apply.fr_name
							this.fr_idcard = res.data.shop_apply.fr_idcard
							this.yyzz_image = res.data.shop_apply.yyzz_image_text
							this.fr_zimage = res.data.shop_apply.fr_zimage_text
							this.fr_fimage = res.data.shop_apply.fr_fimage_text
							this.area = res.data.shop_apply.cityinfo.split('/')
							this.shop_url = res.data.shop_apply.shop_url
							this.lxr_data = res.data.shop_apply.shop_apply_lxr
							this.qyflname = res.data.shop_apply.shop_item_text
							this.qyflid = res.data.shop_apply.shop_item_ids.split(",")
							this.zyyw = res.data.shop_apply.zyyw
							this.zj = res.data.shop_apply.zj
							this.email = res.data.shop_apply.email || ""
							this.gsjj = res.data.shop_apply.gsjj
							this.qyxc= res.data.shop_apply.qyxc
							this.qyxq= res.data.shop_apply.qyxq
							this.mm_image=res.data.shop_apply.images_text
							this.video_url.push(res.data.shop_apply.video_url_text)
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			submit() {
				let _this = this
				let flag = false
				let nameflag = false
				if (_this.zyyw == "") {
					httpRequest.toast("请输入公司主营")
					return
				}
				if (_this.gsjj == "") {
					httpRequest.toast("请输入公司简介")
					return
				}
				if (_this.area.length == 0) {
					httpRequest.toast("请选择经营地址")
					return
				}
				// if (_this.addressdetail == "") {
				// 	httpRequest.toast("请输入企业详细地址")
				// 	return
				// }
				this.lxr_data.forEach(item => {
					if (item.name == "") {
						nameflag = true
					}
					if (!item.mobile.match(/^1\d{10}$/)) {
						flag = true
					}
				})
				if (nameflag) {
					httpRequest.toast("请输入联系人");
					return false;
				}
				if (flag) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				// if(this.zj != ""){
				// 	let isMob = /^((0\d{2,3}))?(\d{7,8})$/; // 固话正则
				// 	if (!isMob.test(this.zj)) {
				// 		httpRequest.toast("座机号码格式错误")
				// 		return false
				// 	}
				// }

				// if (this.email != "") {
				// 	let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
				// 	if (!reg.test(this.email)) {
				// 		httpRequest.toast("请输入有效的邮箱");
				// 		return false;
				// 	}
				// }
				httpRequest.modal('提示', '确定提交吗？', true, (res) => {
					if (res) {
						uni.showLoading({
							title: '请稍候...',
							mask: true
						})
						httpRequest.request('/api/user/editShopApply', 'POST', {
							// 传参
							zyyw: this.zyyw,
							shop_url: this.shop_url,
							lxr_data: this.lxr_data,
							zj: this.zj,
							email: this.email,
							province_id: _this.address.province,
							city_id: _this.address.city,
							area_id: _this.address.county,
							address: _this.addressdetail,
							gsjj: _this.gsjj,
							images: _this.mm_image.join(','),//上传图片
							video_url: _this.video_url.join(','),//上传视频
							qyxc: _this.qyxc,//企业形象宣传
							qyxq: _this.qyxq,//企业详情
						}, false, false, true).then(res => {
							uni.hideLoading()
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack(2)
								}, 500)
							}
						}).catch(err => {
							uni.hideLoading()
							httpRequest.toast(err.msg);
						})
					}
				})

			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item_image_box {
		width: 25%;
	}
	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.videourl {
		width: 180rpx;
		height: 180rpx;
	}
	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 30rpx 10rpx 0 0;
		width: 200rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		margin: 30rpx 10rpx 0 0;
		width: 200rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.scroll-Y {
		height: 500rpx;
	}

	.right_icon {
		margin-left: 8rpx;
	}

	.neirong {
		padding-bottom: 200rpx;
	}

	.shefz {
		width: 48%;
		height: 291rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yyz {
		width: 100%;
		height: 291rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.inputs {
		width: 60%;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.zdy {
		font-size: 30rpx;
		width: 100%;
	}

	/deep/.selected-item-active {
		border-bottom: 2px solid #ffc059;
	}

	.grey {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 300rpx;
	}

	.grey_num {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-top: 11rpx;
		width: 300rpx;
	}

	.center_a {
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
		margin-top: 30rpx 0rpx 0rpx 0rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.del {
		margin: 0rpx 13rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.zhuan {
		padding-bottom: 30rpx;
	}

	.tian {
		padding-right: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.center_nav {
		padding: 30rpx 30rpx 30rpx 30rpx;
	}

	.hh {
		border-bottom: 1rpx RGBA(247, 247, 247, 1) solid;
	}

	.center_gray {
		background-color: #fafafa;
	}
</style>